<template>
  <a-modal :title="title" :width="width" :visible="visible" @cancel="handleCancel" :footer="null">
    <div style="margin: 30px 40px 0 40px">
      <a-steps :current="current" style="margin-bottom: 30px">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div v-if="current == 0">
        <j-form-container>
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail" v-enterToNext>
            <a-row>
              <a-col :span="24">
                <a-form-model-item :label="$t('门店编码')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
                  <a-input v-model="model.code" :placeholder="$t('请输入门店编码')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('门店名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                  <a-input v-model="model.name" :placeholder="$t('请输入门店名称')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('状态')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="state">
                  <j-switch v-model="model.state"></j-switch>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('联系人')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contact">
                  <a-input v-model="model.contact" :placeholder="$t('请输入联系人')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('联系电话')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
                  <a-input v-model="model.phone" :placeholder="$t('请输入联系电话')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('门店地址')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                  <a-input v-model="model.address" :placeholder="$t('请输入门店地址')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('备注')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="comment">
                  <a-input v-model="model.comment" :placeholder="$t('请输入备注')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('图片')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopPicture">
                  <j-image-upload isMultiple :number="1" v-model="model.shopPicture"></j-image-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </div>
      <div v-if="current == 1">
        <j-form-container>
          <a-form-model ref="form1" :model="model1" :rules="validatorRules1" slot="detail">
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('阿里AccessKeyID')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="accessKeyId"
                >
                  <a-input v-model="model1.accessKeyId" :placeholder="$t('请输入阿里AccessKeyID')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('阿里AccessKeySecret')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="accessKeySecret"
                >
                  <a-input v-model="model1.accessKeySecret" :placeholder="$t('请输入阿里AccessKeySecret')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('服务器位置')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regionId">
                  <a-input v-model="model1.regionId" :placeholder="$t('请输入服务器位置')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('oss存储名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bucketname">
                  <a-input v-model="model1.bucketname" :placeholder="$t('请输入oss存储名称')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('备注')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="commet">
                  <a-input v-model="model1.commet" :placeholder="$t('请输入备注')"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </div>
      <div v-if="current == 2">
        <j-form-container>
          <a-form-model ref="form2" :model="model2" :rules="validatorRules2" slot="detail">
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('阿里AccessKeyID')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="accessKeyId"
                >
                  <a-input v-model="model2.accessKeyId" :placeholder="$t('请输入阿里AccessKeyID')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('阿里AccessKeySecret')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="accessKeySecret"
                >
                  <a-input v-model="model2.accessKeySecret" :placeholder="$t('请输入阿里AccessKeySecret')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('服务器位置')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regionId">
                  <a-input v-model="model2.regionId" :placeholder="$t('请输入服务器位置')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('阿里物联产品名称')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="productName"
                >
                  <a-input v-model="model2.productName" :placeholder="$t('请输入阿里物联产品名称')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="$t('备注')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="commet">
                  <a-input v-model="model2.commet" :placeholder="$t('请输入备注')"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </div>
      <div class="steps-action" style="text-align:right">
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">{{$t('下一步')}}</a-button>
        <a-button v-if="current == steps.length - 1" type="primary" @click="submitForm">{{$t('完成')}}</a-button>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">{{$t('上一步')}}</a-button>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { Modal } from 'ant-design-vue'
import { postAction } from '../../../api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: '',
  components: {},
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      current: 0,
      steps: [{ title: this.$t('门店设置') }, { title: this.$t('OSS存储') }, { title: this.$t('物联配制') }],

      model: {},
      model1: {},
      model2: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules: {
        code: [
          { required: true, message: this.$t('请输入门店编码') },
          {
            validator: (rule, value, callback) =>
              validateDuplicateValue('bis_shop', 'code', value, this.model.id, callback),
          },
        ],
        name: [
          { required: true, message: this.$t('请输入门店名称') },
          {
            validator: (rule, value, callback) =>
              validateDuplicateValue('bis_shop', 'name', value, this.model.id, callback),
          },
        ],
        state: [{ required: true, message: this.$t('请输入状态') }],
        contact: [{ required: true, message: this.$t('请输入联系人') }],
        phone: [{ required: true, message: this.$t('请输入联系电话') }],
        address: [{ required: true, message: this.$t('请输入门店地址') }],
      },
      validatorRules1: {
        accessKeyId: [{ required: true, message: this.$t('请输入阿里AccessKeyID') }],
        accessKeySecret: [{ required: true, message: this.$t('请输入阿里AccessKeySecret') }],
        regionId: [{ required: true, message: this.$t('请输入服务器位置') }],
        bucketname: [{ required: true, message: this.$t('请输入oss存储名称') }],
      },
      validatorRules2: {
        accessKeyId: [{ required: true, message: this.$t('请输入阿里AccessKeyID') }],
        accessKeySecret: [{ required: true, message: this.$t('请输入阿里AccessKeySecret') }],
        regionId: [{ required: true, message: this.$t('请输入服务器位置') }],
        productName: [{ required: true, message: this.$t('请输入阿里物联产品名称') }],
      },
      addurl: ['/shop/bisShop/add', '/oss/bisAliOss/add', '/mqtt/bisAliMqtt/add'],
    }
  },
  created() {},
  methods: {
    show() {
      this.visible = true
    },
    next() {
      this.current++
    },
    prev() {
      this.current--
    },
    handleCancel() {
      this.visible = false
    },
    close(a) {
      if (a == 3) {
        this.visible = false
        this.$message.success(this.$t('设置成功'))
      }
    },
    submitForm() {
      let that = this
      let aa = 0
      postAction('/shop/bisShop/add', that.model).then((res) => {
        if (res.success) {
          aa++
          that.close(aa)
        } else {
          that.$message.warning(res.message)
        }
      })
      postAction('/oss/bisAliOss/add', this.model1).then((res) => {
        if (res.success) {
          aa++
          that.close(aa)
        } else {
          that.$message.warning(res.message)
        }
      })
      postAction('/mqtt/bisAliMqtt/add', this.model2).then((res) => {
        if (res.success) {
          a++
          that.close(aa)
        } else {
          that.$message.warning(res.message)
        }
      })

      // // 触发表单验证
      // that.$refs.form.validate((valid) => {
      //   if (valid) {
      //     postAction('/shop/bisShop/add', that.model).then((res) => {
      //       if (res.success) {
      //         that.$message.success(res.message + '门店')
      //         that.$emit('ok')
      //       } else {
      //         that.$message.warning(res.message)
      //       }
      //     })
      //   }
      // })
      // this.$refs.form1.validate((valid) => {
      //   if (valid) {
      //     postAction('/oss/bisAliOss/add', this.model1).then((res) => {
      //       if (res.success) {
      //         that.$message.success(res.message  + 'oss')
      //         that.$emit('ok')
      //       } else {
      //         that.$message.warning(res.message)
      //       }
      //     })
      //   }
      // })
      // this.$refs.form2.validate((valid) => {
      //   if (valid) {
      //     postAction('/mqtt/bisAliMqtt/add', this.model2).then((res) => {
      //       if (res.success) {
      //         that.$message.success(res.message  + '物联')
      //         that.$emit('ok')
      //       } else {
      //         that.$message.warning(res.message)
      //       }
      //     })
      //   }
      // })
    },
  },
}
</script>